<!-- 基础配置-原材料 -->
<template>
    <el-dialog :title="title" :visible.sync="open" width="100%" append-to-body :close-on-click-modal="false"
        v-dialogDrag>
        <div class="app-container" style="background: #f3f6f9;height: 100%;overflow-y: hidden;">
            <el-row style="height: 100%;">
                <el-col :span="5" style="height: 100%;">
                    <div class="boxcss">
                        <el-form :model="queryParams" ref="queryForm" size="medium" :inline="true">
                            <el-form-item prop="type">
                                <el-input style="font-size: 12px;" v-model="queryParams.name"
                                    prefix-icon="el-icon-search" placeholder="请输入产品" clearable
                                    @keyup.enter.native="handleQuery">
                                    <el-button slot="append" @click="handleQuery">搜索</el-button>
                                </el-input>
                                <el-button size="mini" slot="append" icon="el-icon-search"
                                    @click="handleQuery"></el-button>
                            </el-form-item>
                        </el-form>
                        <div class="ulbox" v-if="CpList.length != 0">
                            <!-- <div :class=" isType == index ? 'libox1' : 'libox'" v-for="(item,index) in typeList" :key="index"
                                 @click="onType(index)">
                              {{item}}
                            </div> -->
                            <div :class="isType == index ? 'libox3' : 'libox2'" v-for="(item, index) in CpList"
                                :key="index" @click="onType(index, item)">
                                <div class="topbox">
                                    <div class="topboxhbox">
                                        <i class="el-icon-s-order" style="color: #409EFF;margin-right: 5px;"></i>
                                        {{ item.code }}
                                    </div>
                                    <div
                                        style="margin-left: auto;width: 50px;display: flex;justify-content: space-between;">
                                        <!--<el-popconfirm :title="`确认删除当前数据项？`" @confirm="handleDelete(index)">
                                            <i class="el-icon-document" slot="reference"></i>
                                        </el-popconfirm>-->
                                    </div>
                                </div>
                                <div :class="isType == index ? 'hcss1' : 'hcss'">
                                    {{ item.name }}
                                </div>
                                <div :class="isType == index ? 'hcss1' : 'hcss'">
                                    需求数量：{{item.count}}
                                </div>
                            </div>
                        </div>
                        <el-empty :image-size="200" description="暂无产品" style="margin-top: 200px;" v-else></el-empty>
                    </div>
                </el-col>
                <el-col :span="7" style="height: 100%;">
                    <div class="boxcss">
                        <div style="display: flex;align-items: center;">
                            <el-form :model="queryParams" ref="queryForm" size="medium" :inline="true">
                                <el-form-item prop="type">
                                    <el-input style="font-size: 12px;" v-model="queryParams1.name" placeholder="请输入工序"
                                        clearable @keyup.enter.native="handleQuery">
                                        <el-button size="mini" slot="append" icon="el-icon-search"
                                            @click="handleQuery"></el-button>
                                    </el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="ulbox" v-if="GyList.length != 0">
                            <div :class="isNum == index ? 'libox3' : 'libox2'" v-for="(item, index) in GyList"
                                :key="index" @click="onNum(index, item)">
                                <div class="topbox">
                                    <div class="topboxhbox">
                                        <i class="el-icon-s-order" style="color: #409EFF;margin-right: 5px;"></i>
                                        {{ item.code }}
                                    </div>
                                    <div
                                        style="margin-left: auto;width: 50px;display: flex;justify-content: space-between;">
                                        <!-- <el-popconfirm :title="`确认删除当前数据项？`" @confirm="handleDelete(index)">
                    <i class="el-icon-document" slot="reference"></i>
                  </el-popconfirm> -->
                                    </div>
                                </div>
                                <div :class="isNum == index ? 'hcss1' : 'hcss'">
                                    <!-- {{typeList[isType]}}MD-{{index}} -->
                                    {{ item.name }}
                                </div>
                            </div>
                        </div>
                        <el-empty :image-size="200" description="暂无工艺" style="margin-top: 200px;" v-else></el-empty>
                    </div>
                </el-col>
                <el-col :span="12" style="height: 100%;">
                    <div class="boxcss">
                        <div style="display: flex;align-items: center;">
                            <el-form :model="queryParams" ref="queryForm" size="medium" :inline="true">
                                <el-form-item prop="type">
                                    <el-input style="font-size: 12px;" v-model="queryParams.num" placeholder="请输入人员名称"
                                        clearable @keyup.enter.native="handleQuery">
                                        <el-button size="mini" slot="append" icon="el-icon-search"
                                            @click="handleQuery"></el-button>
                                    </el-input>
                                </el-form-item>
                            </el-form>
                            <el-button type="primary" plain icon="el-icon-plus" size="mini"
                                @click="addGx">分配人员</el-button>
                        </div>
                        <div class="ulbox" v-if="GxList.length != 0">
                            <el-table :data="GxList" ref="table">
                                <el-table-column align="center" label="姓名" prop="userName" />
                                <el-table-column align="center" label="工序名称" prop="name" />
                                <el-table-column align="center" label="图纸号" prop="shuoming" />
                                <el-table-column align="center" label="产品编码" prop="goodsCode" />
                                <el-table-column align="center" label="产品名称" prop="goodsName" />
                                <el-table-column align="center" label="产品型号" prop="goodsModel" />
                                <!--<el-table-column align="center" label="型号明细" prop="goodsBrand" />-->
                                <el-table-column align="center" label="单价" prop="money" />
                                <el-table-column align="center" label="分配数量" prop="count" />
                                <el-table-column align="center" label="已完成数量" prop="finishCount" />
                                <el-table-column align="center" label="总价" prop="allMoney" />
                                <el-table-column align="center" label="计划完成时间" prop="planEndTime" >
                                  <template slot-scope="scope">
                                    <span>{{ parseTime(scope.row.planEndTime, '{y}-{m}-{d} ') }}</span>
                                  </template>
                                </el-table-column>
                                <!--<el-table-column align="center" label="实际完成时间" prop="doEndTime"/>-->
                                <el-table-column align="center" label="备注" prop="remark" />
                                <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
                                    <template slot-scope="scope">
                                        <!--<el-button @click="handleModifyUser(scope.row)" icon="el-icon-view" size="mini"
                                            type="text">
                                            修改
                                        </el-button>-->
                                        <el-popconfirm :title="`确认删除当前数据项？`" @confirm="handleDeletes(scope.row)"
                                            style="margin-left: 10px;">
                                            <el-button slot="reference" size="mini" type="text"
                                                icon="el-icon-delete">删除</el-button>
                                        </el-popconfirm>
                                        <el-button @click="baogong(scope.row)" icon="el-icon-view" size="mini"
                                            type="text">
                                            报工
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                        </div>
                        <el-empty :image-size="200" description="暂无人员任务" style="margin-top: 200px;" v-else></el-empty>
                        <addUseForm-list @ok="yuangongList2" ref="addUseForm"></addUseForm-list>
                        <modifyUseForm-list @ok="getList" ref="modifyUseForm"></modifyUseForm-list>
                        <baogongForm-list @ok="yuangongList2" ref="baogongForm"></baogongForm-list>
                        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize" @pagination="getList" />
                    </div>
                </el-col>
            </el-row>
            <addGongyi-list ref="addGongYi" @ok="refresh1Bnt"></addGongyi-list>
            <addGxGyGoods-list ref="addGongxuList" @ok="refresh2Bnt"></addGxGyGoods-list>
            <RawMaterialNumberOrNameForm ref="rawMaterialNumberOrNameForm" @ok="getList" />
            <RawMaterialDetectionForm ref="rawMaterialDetectionForm" @ok="getList" />
        </div>
    </el-dialog>
</template>

<script>
import { addAction, deleteAction, getAction, getById } from '@/api/manage'
import AddUseFormList from "@/views/develop/projectBaseInfo/prjForGoodsIn/AddUseFormList";
import ModifyUseFormList from "@/views/develop/projectBaseInfo/prjForGoodsIn/ModifyUseFormList";
import BaogongFormList from "@/views/develop/projectBaseInfo/prjForGoodsIn/BaogongFormList";
import AddGongyiList from '@/views/develop/lnGongyi/module/AddGongyiList'
import RawMaterialNumberOrNameForm from '@/views/develop/factory/setUp/module/RawMaterialNumberOrNameForm'
import AddGxGyGoodsList from '@/views/develop/lnGongyi/module/AddGxGyGoodsList'
import RawMaterialDetectionForm from '@/views/develop/factory/setUp/module/RawMaterialDetectionForm'
export default {
    name: 'AllocatingTask',
    components: {
        RawMaterialNumberOrNameForm,
        RawMaterialDetectionForm,
        AddGongyiList,
        AddGxGyGoodsList,
        AddUseFormList,
        ModifyUseFormList,
        BaogongFormList,
    },
    data() {
        return {
            remainCount: null,
            title: '批量分配任务',
            open: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            // 研发经费表格数据
            dataList: [],
            activeName: '1',
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 1000,
                id: null,
                code: null,
                name: null,
                model: null,
                remark: null,
                produceId: null,
                //isdo: '1',
                orderByColumn:"create_time",
                isAsc: "desc"
            },
            queryParams1: {
                pageNum: 1,
                saleId: '',
                pageSize: 1000,
                id: null,
              //isdo: '1',
                orderByColumn:"create_time",
                isAsc: "desc",
            },
            queryParams2: {
                pageNum: 1,
                pageSize: 1000,
                id: null,
                isAsc: "desc",
                //isdo: '1',
            },
            proId: '',
            isType: 0,
            typeList: ['产品1', '产品2', '产品3', '产品4', '产品5', '产品6'],
            isNum: 0,
            numList: [],
            tableMaxHeight: 0,
            isNums: 0,
            url: {
                list: '/factoryProduceSaleAll/factoryProduceSaleAll/list',
                gylist: '/lnGongyigoods/lnGongyigoods/list',
                gxlist: '/goodsSaledoGongxu/goodsSaledoGongxu/list',
                yglist: '/goodsSaledoGongxuUser/goodsSaledoGongxuUser/list',
                gxditlist: '/lnGongyigongxu/lnGongyigongxu/list',
                getById: '/projectBaseInfo/projectBaseInfo/',
                remove: '/lnGongyigongxu/lnGongyigongxu/',
                xzgx: '/goodsSale/goodsSale/insertForPrjGygx',
                listByParentId: '/goodsSaledoGongxuUser/goodsSaledoGongxuUser/list',
                removeUpdate: '/goodsSaledoGongxuUser/goodsSaledoGongxuUser/removeUpdate/',
            },
            CpList: [],
            GyList: [],
            GxList: [],
            GxForm: [],
            goodsId: '',
            cpId: '',
            cpForm: {},
            GxsForm: {},
        }
    },
    created() {
        this.getList();
        setTimeout(() => {
            // this.tableMaxHeight = this.$refs.header.offsetHeight - this.$refs.headerTop.offsetHeight - 100
        }, 500)
        window.addEventListener('resize', this.getTableHeight);
    },
    mounted() {
        // this.tableMaxHeight = this.$refs.header.offsetHeight - this.$refs.headerTop.offsetHeight
    },
    destroyed() {
        window.removeEventListener('resize', this.getTableHeight)
    },
    methods: {
        /** 删除按钮操作 */
        handleDeletes(row) {
            const ids = row.id || this.ids;
            deleteAction(this.url.removeUpdate, ids).then(response => {
                this.yuangongList2();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        baogong(row) {
            this.$refs.baogongForm.baogongShow(row);
        },
        handleModifyUser(row) {
            this.$refs.modifyUseForm.modifyUserShow(row, this.remainCount);
        },
        handleAddUser() {
            this.$refs.addUseForm.addUserShow(this.remainCount, this.parentId, this.money);
        },
        // 删除工序
        gxDelete(row) {
            const ids = row.id || this.ids;
            deleteAction(this.url.remove, ids).then(response => {
                this.isNums = 0
                this.gongxiList(row);
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        // 添加工序
        addGx() {
            // this.$refs.addGongxuList.showGxGyGoods(this.queryParams2.gongyiId, this.queryParams.goodsId);
            this.$refs.addUseForm.addUserShow(this.GxsForm, this.GxsForm.id, this.GxsForm.money);
        },
        // 添加工艺
        addGongYi() {
            this.$refs.addGongYi.showGy(this.cpForm.goodsId);
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id;
            this.proId = id;
            this.open = true;
            this.title = "分配任务";
            this.getList();

            /*this.proStatus = row.status;
            getById(this.url.getById, id).then(response => {
                this.open = true;
                this.title = "分配任务";
                this.getList();
            });*/
        },
        // 产品列表查询
        getList() {
            this.GyList = []
            this.GxList = []
            this.GxForm = {}
            this.loading = true;
            this.queryParams.produceId = this.proId;
            getAction(this.url.list, this.queryParams).then(response => {
                this.CpList = response.rows;
                this.gongxiList(response.rows[0])
                this.goodsId = response.rows[0].goodsId
                this.cpForm = response.rows[0]
                this.cpId = response.rows[0].id
                this.total = response.total;
                this.loading = false;
            });
        },
        // 工序列表查询
        gongxiList(e) {
            this.loading = true;
            this.queryParams1.saleId = e.id
            this.queryParams1.gongyiId = e.gongyiId
            getAction(this.url.gxlist, this.queryParams1).then(response => {
                this.GyList = response.rows
                this.GxsForm = response.rows[0]
                this.yuangongList(response.rows[0])
                this.loading = false;
            });
        },
        // 员工列表查询
        yuangongList(e) {
            this.loading = true;
            this.queryParams2.parentId = e.id
            getAction(this.url.yglist, this.queryParams2).then(response => {
                this.GxList = response.rows
                this.GxForm = response.rows[0]
                this.loading = false;
            });
        },
        yuangongList2(e) {
            this.loading = true;
            getAction(this.url.yglist, this.queryParams2).then(response => {
                this.GxList = response.rows
                this.GxForm = response.rows[0]
                this.loading = false;
            });
        },
        reset() {
            this.form = {
                id: null,
                remark: null,
                delFlag: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null
            };
            this.resetForm("form");
        },
        getTableHeight() {
            this.tableMaxHeight = this.$refs.header.offsetHeight - this.$refs.headerTop.offsetHeight - 100
        },
        //新增原材料编号名称
        addNum(e) {
            if (e == 1) {
                this.$refs.rawMaterialNumberOrNameForm.handleAdd();
            } else {
                this.$refs.rawMaterialDetectionForm.handleAdd();
            }
        },
        //编辑原材料编号名称
        onEdit(e) {
            if (e == 1) {
                var obj = {
                    id: 1,
                    num: 'YLI24103100271',
                    name: '金属杆001',
                    type: '金属杆',
                    batchNum: 'PCH1730553018127',
                    brand: 'xiaomi',
                    unit: 'kg',
                    manufacturer: 'xiaomizhineng',
                    origin: '上海',
                    putStorageTime: '2024-10-21',
                    voltageLevel: '16kv',
                    speModels: '型号1730353018127',
                    eipMatDes: '暂无备注'
                }
                this.$refs.rawMaterialNumberOrNameForm.handleUpdate(obj);
            } else {
                var obj = {}
                this.$refs.rawMaterialDetectionForm.handleUpdate(obj);
            }
        },
        // 添加完工艺刷新
        refresh1Bnt() {
            this.isNum = 0
            this.isNums = 0
            this.GyList = []
            this.GxList = []
            this.GxForm = {}
            this.gongxiList({ goodsId: this.cpForm.goodsId })
        },
        // 添加工序刷新
        refresh2Bnt() {
            this.isNum = 0

            this.gongxiList({ gongyiId: this.queryParams2.gongyiId })
        },
        //一级筛选
        onType(e, item) {
            this.isType = e
            this.isNum = 0
            this.isNums = 0
            this.GyList = []
            this.GxList = []
            this.GxForm = {}
            this.queryParams1.goodsId = item.goodsId
            this.goodsId = item.goodsId
            this.cpId = item.id
            this.cpForm = item
            this.gongxiList(item)
        },
        onNum(e, item) {
            this.isNum = e
            this.isNums = 0
            this.GxList = []
            this.GxForm = item
            this.GxsForm = item
            this.yuangongList(item)
        },
        onNums(e, item) {
            this.isNums = e
            this.GxForm = item
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 删除按钮操作 */
        handleDelete(e) {
            this.getList();
            this.$modal.msgSuccess("删除成功");
        },
        handleGy(e, item) {
            addAction(this.url.xzgx, { columnsGongxu: this.GxList, gongyiId: item.gongyiId, goodsId: this.goodsId, saleId: this.cpId }).then(response => {
                this.isNum = 0
                this.isNums = 0
                this.GyList = []
                this.GxList = []
                this.GxForm = {}
                this.gongyiList({ goodsId: this.cpForm.goodsId })
                this.$modal.msgSuccess("默认成功");

            }).catch(() => { });
            console.log(this.goodsId, item.gongyiId, this.GxList)
            // this.getList();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
    }
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item--medium,
::v-deep .el-form-item__content {
    width: 100%;
}

::v-deep .el-collapse-item__wrap,
::v-deep .el-collapse,
::v-deep .el-collapse-item__header {
    border: none;
}

::v-deep .el-date-editor--daterange.el-input__inner {
    width: 228px;
}

::v-deep .el-form-item__label {
    font-size: 12px;
    font-weight: 500;
    padding: 0 5px 0 0;
}

::v-deep .el-form-item {
    margin-bottom: 0;
}

.jculbox {
    flex-wrap: wrap;
    padding: 0 10px;
}

.jclibox {
    display: flex;
    // align-items: center;
    width: 400px;
    margin-top: 15px;
}

.jclihcss {
    font-size: 12px;
    color: #909399;
    margin-right: 10px;
}

.jclitcss {
    font-size: 12px;
    color: #333;
}

.hbox {
    display: flex;
    align-items: center;
}

.hboxhcss {
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

.hboxxian {
    width: 5px;
    height: 18px;
    background: #1890ff;
    margin-right: 5px;
    border-radius: 2px;
}

.boxcss {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    margin-right: 15px;
    height: 100%;
}

.martcss {
    margin-top: 15px;
}

.ulbox {
    height: calc(100% - 65px);
    overflow-y: scroll;
    margin-top: 15px;
}

.libox {
    color: #333;
    background: #fff;
    border-color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 12px;
}

.libox1 {
    color: #1890ff;
    background: #e8f4ff;
    border-color: #a3d3ff;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
}

.libox2 {
    background: #fff;
    border-color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #90939950;
    margin-bottom: 10px;
}

.libox3 {
    background: #e8f4ff;
    border-color: #a3d3ff;
    border: 1px solid #1890ff;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.topbox {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    margin-bottom: 15px;
}

.topboxhbox {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #909399;
}

.hcss {
    font-size: 12px;
    color: #333;
}

.hcss1 {
    font-size: 12px;
    font-weight: 500;
    color: #1890ff;
}
</style>
